<template>
  <div class="template_box">
    <!--    查询-->
    <div class="template_search">
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">设备型号：</div>
        <a-input disabled v-model:value="device_type_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <div class="title">数采终端编号：</div>
        <a-input disabled v-model:value="terminal_number" placeholder="请输入搜索内容"/>
      </div>
      <div class="template_search_box">
        <a-button style="margin-right: 10px" type="primary" disabled>查询</a-button>
        <a-button type="primary" disabled>重置</a-button>
      </div>
    </div>
    <!--    列表-->
    <div class="template_table">
      <div class="template_add_btn">
        <!--        <a-button style="margin-right: 0.2rem" type="primary" @click="add_device_func">新增</a-button>-->
        <a-button type="primary" @click="re_flash()">刷新</a-button>
      </div>
      <div :style="{height:height,overflow:'auto'}">
        <a-table :pagination="false" bordered :dataSource="device_person.data_list" :columns="columns">
          <!--          <template #partNum="{record}">-->
          <!--            {{ record.partNum }}-->
          <!--            -->
          <!--          </template>-->
          <template #operation="{ record }">
            <a-popconfirm
                v-if="device_person.data_list.length && !statusObject.edit_status"
                title="确认对这个负责人进行派单?"
                okText="确认"
                cancelText="取消"
                @confirm="send_partInfo(record.key)"
                :style="{cursor: 'pointer'}"
            >
              <a>派单</a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>

      <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                    :total="pageObject.total"
                    @change="changePage"/>
    </div>
    <add_person_device @re_flash:re_flash="re_flash"/>
  </div>
</template>

<script>
import {defineComponent, ref, reactive, onMounted} from 'vue';
import {edit_p_class, get_p_class_o} from "@/api/device/device_person"
import {message} from "ant-design-vue";
import {handle_key} from "@/utils/handle_key";
import {cloneDeep} from "lodash-es";
import {editEquipment} from "@/api/device/device";
import {get_user_list_all} from "@/api/user"
import {useStore} from "vuex";
import add_person_device from "@/views/device/add/add_person_device";
import {get_partInfo_num} from "@/api/device/partInfo";
import {getStyleByEl} from "@/utils/dom/get_dom_style";
import router from "@/router";
import {encryption} from "@/utils/base64";


export default defineComponent({
  // name: "WorkpieceInformation";
  name: "work_order_record",
  props: {},
  setup() {
    const store = useStore()
    const dataSource = [];
    const columns = [
      {
        title: '设备名称',
        dataIndex: 'equipmentName',
        key: 'equipmentName',
        slots: {
          customRender: 'equipmentName',
        },
      },
      {
        title: '班次',
        dataIndex: 'className',
        key: 'className',
      },
      {
        title: '负责人',
        dataIndex: 'realName',
        key: 'realName',
        slots: {
          customRender: 'realName',
        },
      },
      {
        title: '设备编号',
        dataIndex: 'equipmentCode',
        key: 'equipmentCode',
        slots: {
          customRender: 'equipmentCode',
        },
      },
      {
        title: '工件数量',
        dataIndex: 'partNum',
        key: 'partNum',
        slots: {
          customRender: 'partNum',
        },
      },
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
      },
    ];
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')
    /**
     * 编辑的参数
     *
     * */
    const edit_params = reactive({
      "id": 0,
      "uEquipmentCode": "",
      "equipmentCode": "",
      "cId": 0,
      "userId": 0,
      "createTime": "",
      "updateTime": "",
      "createUserId": 0,
      "updateUserId": 0
    })
    /**
     * status
     *
     * */
    const statusObject = reactive({
      edit_status: false
    })
    /**
     * 编辑
     *
     * */
    const editableData = reactive({});
    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });
    /**
     * 请求参数
     * */
    const device_person = reactive({
      params: {
        "pageIndex": pageObject.pageIndex,
        "pageSize": 10,
        "bId": 0,
        "cId": 0,
        "userId": 0,
        "searchValue": "",
        "searchBeginTime": "",
        "searchEndTime": ""
      },
      data_list: []
    });
    //获取分页数据
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
    };

    //列表删除确认
    const onDelete = key => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    //获取数据列表
    const get_list = async () => {
      const res = await get_partInfo_num()
      console.log(res)
      if (res.code === 1) {
        device_person.data_list = handle_key(res.data)
        pageObject.total = res.totalItems
        return
      }
      message.warning(res.message)
    }

    const edit = key => {
      editableData[key] = cloneDeep(device_person.data_list.filter(item => key === item.key)[0]);
      statusObject.edit_status = true;
    };
    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.id = device_person.data_list[key].id;
      edit_params.uEquipmentCode = editableData[key].uEquipmentCode;
      edit_params.equipmentCode = editableData[key].equipmentCode;
      edit_params.userId = editableData[key].userId;
      const res = await edit_p_class(edit_params)
      console.log(res)
      if (res.code === 1) {
        delete editableData[key];
        statusObject.edit_status = false
        message.success("修改成功")
        get_list()
        return
      }
      message.warning(res.message)

    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };
    /**
     * 获取用户信息列表
     * */


    const init = () => {
      //获取列表
      get_list();

    }

    /**
     *
     *
     * */
    const handle_user_id = (user_id) => {
      try {
        console.log(store.state.user.user_list)
        const data = store.state.user.user_list.filter((item) => item.userId == user_id);
        return data[0].realName
      } catch (e) {
        console.log("数据解析异常")
        return ""
      }

    }
    /**
     * 刷新
     * */
    const re_flash = () => {
      device_person.data_list = [];
      get_list()
    }

    /**
     * 新增
     * */
    const add_device_func = () => {
      store.commit("SET_ADD_ROLE", true)
    }

    /**
     * 数据初始化
     *
     * */
    const height = ref('')

    onMounted(() => {
      init();
      const box_height = get_dom_style(".template_container_box");
      const search_box = get_dom_style(".template_search")
      height.value = Number(box_height.replace("px", "")) - Number(search_box.replace("px", "")) - 88 + 'px'
    })

    const get_dom_style = (dom) => {
      const el = document.querySelector(dom);
      const style = getStyleByEl(el)
      return style.height
    }
    /**
     * 派单
     * */
    const send_partInfo = (key) => {
      router.push({
        path: "/index/device/task_distribution_details", query: {
          partInfo: encryption(JSON.stringify(device_person.data_list[key]))
        }
      })
    }


    return {
      device_number,
      device_type_number,
      terminal_number,
      dataSource,
      columns,
      pageObject,
      device_person,
      handle_user_id,
      onDelete,
      changePage,
      editableData,
      statusObject,
      edit,
      save,
      cancel,
      store,
      re_flash,
      add_device_func,
      height,
      send_partInfo
    };
  },
  components: {
    add_person_device
  }
});

</script>

<style scoped lang="scss">
.template_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    height: 100%;

    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>
